<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table {
            width: 100%;
            /* 可继承属性 */
            text-align: center;
            color: red;
        }

        td,
        th {
            padding: 10px;
        }

        table,
        tr,
        td,
        th {
            border: dotted 1px blue;
            border-collapse: collapse;
        }
    </style>

</head>

<body>


    <table>
        <caption>课程表</caption>
        <thead>
            <tr>
                <th></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
                <th>星期日</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1-2</th>
                <td>数学</td>
                <td>语文</td>
                <td>英语</td>
                <td>音乐</td>
                <td>美术</td>
                <td colspan="2">体育</td>
            </tr>
            <tr>
                <th>3-4</th>
                <td rowspan="2">数学</td>
                <td>语文</td>
                <td>英语</td>
                <td>音乐</td>
                <td>美术</td>
                <td>体育</td>
                <td>课外</td>
            </tr>
            <tr>
                <th>5-6</th>
                <td>语文</td>
                <td>英语</td>
                <td>音乐</td>
                <td>美术</td>
                <td>体育</td>
                <td>课外</td>
            </tr>
            <tr>
                <th>7-8</th>
                <td>数学</td>
                <td>语文</td>
                <td>英语</td>
                <td>音乐</td>
                <td>美术</td>
                <td>体育</td>
                <td>课外</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="8">节假日，根据国家规定放假。</td>
            </tr>
        </tfoot>
    </table>


</body>

</html>


<!-- HTML 表格 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Tables -->


<!-- HTML 表格 入门 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Tables/Basics -->
<!-- 表格是由行和列组成的结构化数据集(表格数据)，它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值 。 -->

<!-- HTML表格高级特性和可访问性 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Tables/Advanced -->
<!-- 使用 <caption> 为你的表格增加一个标题 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Tables/Advanced#%E4%BD%BF%E7%94%A8_%3Ccaption%3E_%E4%B8%BA%E4%BD%A0%E7%9A%84%E8%A1%A8%E6%A0%BC%E5%A2%9E%E5%8A%A0%E4%B8%80%E4%B8%AA%E6%A0%87%E9%A2%98 -->
<!-- 添加 <thead>, <tfoot>, 和 <tbody> 结构 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Tables/Advanced#%E6%B7%BB%E5%8A%A0_%3Cthead%3E_%3Ctfoot%3E_%E5%92%8C_%3Ctbody%3E_%E7%BB%93%E6%9E%84 -->

<!-- <table> -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table -->
<!-- HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。 -->
<!-- <tr> -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tr -->
<!-- HTML <tr> 元素定义表格中的行。 同一行可同时出现<td> 和<th> 元素. -->
<!-- <td>：表格数据单元格元素 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/td -->
<!-- HTML <td> 元素 定义了一个包含数据的表格单元格。It participates in the table model. -->
<!-- <th> -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th -->
<!-- HTML <th> 元素定义表格内的表头单元格。这部分特征是由 scope and headers 属性准确定义的。 -->
<!-- colspan -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/td#attr-colspan -->
<!-- 这个属性包含一个正整数表示了每单元格中扩展列的数量。默认值为1 。超过1000的值被视作1000。 -->
<!-- rowspan -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/td#attr-rowspan -->
<!-- 这个属性包含一个正整数表示了每单元格中扩展列的数量。默认值为1. 如果该值被设置为 0, 这个单元格就被扩展为(<thead>，<tbody> (en-US) 或<tfoot>)中表格部分的最后一个元素。比65534大的值被视作65534。 -->

<!-- <caption> -->
<!-- HTML <caption> 元素 (or HTML 表格标题元素) 展示一个表格的标题， 它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被CSS样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。 -->
<!-- <thead> -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/thead -->
<!-- HTML的<thead>元素定义了一组定义表格的列头的行。 -->
<!-- <tfoot> -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tfoot -->
<!-- HTML 元素<tfoot>  定义了一组表格中各列的汇总行。 -->
<!-- <tbody>: The Table Body element -->
<!-- The <tbody> HTML element encapsulates a set of table rows (<tr> elements), indicating that they comprise the body of the table (<table>). -->


<!-- 样式化表格 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables -->

<!-- border -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/border -->
<!-- CSS的border属性是一个用于设置各种单独的边界属性的简写属性。border可以用于设置一个或多个以下属性的值： border-width, border-style, border-color。 -->
<!-- 可以使用下面列出的一个，两个或三个值来指定border属性。 值的顺序无关紧要。 -->
<!-- 注意：如果边框的样式未定义，它将不可见。 这是因为样式默认为none。 -->

<!-- border-width -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-width -->
<!-- border-width 属性可以设置盒子模型的边框宽度。 -->
<!-- 它是border-top-width, border-right-width, border-bottom-width, 和 border-left-width的简写; -->
<!-- 边框的宽度属性的有效值要么是一个具体的非负数，要么是一个关键字。如果是关键字，必须是一下几种： -->
<!-- thin	 -->
<!-- A thin border -->
<!-- medium	 -->
<!-- A medium border -->
<!-- thick	 -->
<!-- A thick border -->

<!-- border-style -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style -->
<!-- border-style 是一个 CSS 简写属性，用来设定元素所有边框的样式。 -->
<!-- 注意：border-style 默认值是 none，这意味着如果您只修改 border-width 和 border-color 是不会出现边框的。 -->
<!-- 关键字用于描述边框样式。它可以有以下取值： -->
<!-- none	 -->
<!-- 和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。 -->
<!-- hidden	 -->
<!-- 和关键字 none 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，hidden 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。 -->
<!-- dotted	 -->
<!-- 显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。 -->
<!-- dashed	 -->
<!-- 显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。 -->
<!-- solid	 -->
<!-- 显示为一条实线。 -->
<!-- double	 -->
<!-- 显示为一条双实线，宽度是 border-width 。 -->
<!-- groove	 -->
<!-- 显示为有雕刻效果的边框，样式与 ridge 相反。 -->
<!-- ridge	 -->
<!-- 显示为有浮雕效果的边框，样式与 groove 相反。 -->
<!-- inset	 -->
<!-- 显示为有陷入效果的边框，样式与 outset 相反。当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 groove 的样式。 -->
<!-- outset	 -->
<!-- 显示为有突出效果的边框，样式与 inset 相反。当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 ridge 的样式。 -->

<!-- border-color  -->
<!-- <color> 可以确定border的颜色。如果这个值没有设置，它的默认值是元素的color属性值（是文字颜色而非背景色）。 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-color -->
<!-- CSS属性 border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color, border-right-color, border-bottom-color, border-left-color -->
<!-- color -->
<!-- 使用 <color> 来表示四个边框的颜色，仅用于单值语法。 -->
<!-- horizontal -->
<!-- 使用 <color> 来表示水平（左边框和右边框）边框的颜色，仅用于双值语法。 -->
<!-- vertical -->
<!-- 使用 <color> 来表示垂直（上边框和下边框）边框的颜色，仅用于双值或三值语法。 -->
<!-- top -->
<!-- 使用 <color> 来表示上边框的颜色，仅用于三值或四值语法。 -->
<!-- bottom -->
<!-- 使用 <color> 来表示下边框的颜色，仅用于三值或四值语法。 -->
<!-- right -->
<!-- 使用 <color> 来表示右边框的颜色，仅用于四值语法。 -->
<!-- left -->
<!-- 使用 <color> 来表示左边框的颜色，仅用于四值语法。 -->
<!-- inherit -->
<!-- 这是一个关键词，用于指示四边的颜色值均继承自父元素的计算值。 -->

<!-- border-collapse -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-collapse -->
<!-- border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。 -->
<!-- 合并（collapsed ）模式下，表格中相邻单元格共享边框。在这种模式下，CSS属性border-style 的值 inset 表现为槽，值 outset 表现为脊。 -->
<!-- 分隔（separated）模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过CSS属性 border-spacing 来确定的。 -->
<!-- collapse -->
<!-- 相邻的单元格共用同一条边框（采用 collapsed-border 表格渲染模型）。 -->
<!-- separate -->
<!-- 默认值。每个单元格拥有独立的边框（采用 separated-border 表格渲染模型）。 -->

<!-- width -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/width -->
<!-- width 属性用于设置元素的宽度。width 默认设置内容区域的宽度，但如果 box-sizing 属性被设置为 border-box，就转而设置边框区域的宽度。 -->
<!-- height -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/height -->
<!-- height CSS 属性指定了一个元素的高度。默认情况下，这个属性决定的是内容区（ content area）的高度，但是，如果将 box-sizing 设置为  border-box , 这个属性决定的将是边框区域（border area）的高度。 -->

<!-- text-align -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align -->
<!-- text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。 -->
<!-- start  -->
<!-- 如果内容方向是左至右，则等于left，反之则为right。 -->
<!-- end  -->
<!-- 如果内容方向是左至右，则等于right，反之则为left。 -->
<!-- left -->
<!-- 行内内容向左侧边对齐。 -->
<!-- right -->
<!-- 行内内容向右侧边对齐。 -->
<!-- center -->
<!-- 行内内容居中。 -->
<!-- <string>  -->
<!-- 第一个出现的该（单字符）字符串被用来对齐。跟随的关键字定义对齐的方向。例如，可用于让数字值根据小数点对齐。 -->
<!-- justify -->
<!-- 文字向两侧对齐，对最后一行无效。 -->
<!-- justify-all -->
<!-- 和justify一致，但是强制使最后一行两端对齐。 -->
<!-- match-parent  -->
<!-- 和inherit类似，区别在于start和end的值根据父元素的direction确定，并被替换为恰当的left或right。 -->

<!-- padding -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding -->
<!-- padding CSS 简写属性控制元素所有四条边的内边距区域。 -->
<!-- 该属性是以下属性的简写： -->
<!-- padding-bottom -->
<!-- padding-left -->
<!-- padding-right -->
<!-- padding-top -->
<!-- padding 属性接受 1~4 个值。每个值可以是 <length> 或 <percentage>。取值不能为负。 -->
<!-- 当只指定一个值时，该值会统一应用到全部四个边的内边距上。 -->
<!-- 指定两个值时，第一个值会应用于上边和下边的内边距，第二个值应用于左边和右边。 -->
<!-- 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的内边距。 -->
<!-- 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的内边距。 -->
<!-- length -->
<!-- 以固定值为内边距。 -->
<!-- percentage -->
<!-- 相对于包含块的宽度，以百分比值为内边距。 -->

<!-- color -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/color -->
<!-- colorCSS属性设置颜色值的前景色以及文本装饰，并设置currentcolor (en-US)值。 -->

<!-- background-color -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-color -->
<!-- CSS属性中的 background-color 会设置元素的背景色, 属性的值为颜色值或关键字"transparent"二者选其一. -->